<template>
    <view style="position: relative;">
        <view style="position: absolute;left:0;top: 0;right: 0;bottom: 0;z-index: 10"
              @mouseover="onfocusTip" @mouseout="offfocusTip"  @mousedown="onmousedown"
        ></view>
        <view  v-if="type === 'basics' && componentName.startsWith('I')" class="content">
            <component :is="componentName" :name="name">{{name}}</component>
        </view>
        <view class="title" :class="[componentName.startsWith('I') ? '':'simple-component-name']" v-if="type === 'basics'">
            {{name}}
        </view>
        <view  v-if="type === 'layout'" >
            <view class="flex content-layout">
                <view class="  margin-0 content-layout-item" v-for="(item,index) in num" :class="item.layoutClass">1</view>
            </view>
        </view>
    </view>
</template>

<script>
    import basicsMixin from '@/common/js/importBasics'

    export default {
        mixins: [basicsMixin],
        name: 'ComponentContainer',
        props:{
            num: {
                type: Array,
                default: ()=>[]
            },
            type: {
                type: String,
                default: 'basics'
            },
            componentName:{
                type: String,
                default: ''
            },
            name: {
                type: String,
                default: ''
            }
        },
        data(){
            return {
            }
        },
        methods:{
            onmousedown(){
                // 非基础组件
                if (!this.componentName.startsWith('I')){
                    this.$store.commit('setShowComponentPreview',{showComponentPreview: false})
                }
            },
            offfocusTip(){
                // 非基础组件
                if (!this.componentName.startsWith('I')) {
                    this.$store.commit('setShowComponentPreview', {showComponentPreview: false})
                }
            },
            onfocusTip(){
                // 非基础组件
                if (!this.componentName.startsWith('I')) {
                    this.$store.commit('setComponentPreviewName', {componentPreviewName: this.componentName})
                    this.$store.commit('setShowComponentPreview', {showComponentPreview: true})
                }
            }
        },
        components:{
        }
    }
</script>

<style scoped>
    .content{
        height: 55px;
        width: 75px;
        position: relative;
        border: 2px solid #f7f9fa;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: none;
        overflow: hidden;
        background-image: url();
    }

    .content-layout{
        width: 100%;
        height: 35px;
        background-color: silver;
        position: relative;
        border: 2px solid #ccc;
    }

    .content-layout-item{
        cursor: move;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 2px;
        background-color: #675e6f;
        color: white;
    }

    .title{
        height: 20px;
        width: 100%;
        background-color: white;
        border: 2px solid #f7f9fa;
        border-top: none;
        color: #cccccc;
        line-height: 20px;
    }

    .tip-content-show{
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 225px;
        height: 385px;
        box-shadow: 0px 0px 1px 1px #1a1a1a;
        z-index: 9999;
        background-color: white;
        border: blue solid 2px;
    }
    .tip-content-show-content{
        width: 100%;
        position: relative;
        overflow: hidden;
    }

    .simple-component-name{
        width: 75px;
        padding: 10px 0;
        height: auto;
        border-top: 2px solid #f7f9fa;
    }
</style>
